<template>
    <el-container class="home-container">
        <el-header><!-- 头部区 -->
            <div>
                <span>家族族谱管理系统</span>
            </div>
            <el-button type="info" @click="logout">退出</el-button>
        </el-header>
        <!-- 页面主体区域 -->
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="200px">
        <el-menu
          background-color="#0080ff"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-submenu>
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
            <!-- 右侧内容主体 -->
            <el-main>Main</el-main>
        </el-container>
    </el-container>
</template>
 
<script>
export default {
    methods:{
        logout(){
            window.sessionStorage.clear();
            this.$router.push('/');
        }
    }
};
</script>
 
<style lang="less" scoped>
.home-container{
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
}
 .el-header{
     background-color: #1d0f98;
     display: flex; //设置显示为flex布局
     justify-content: space-between;//设置为flex左右布局
     padding-left: 0;//左内边距为0（Logo贴左边）
     align-items: center;//元素上下居中（防止右边按钮贴上下边）
     color: #fff;
     font-size: 20px;
     > div {//内嵌的div样式
         display: flex;
         align-items: center;//Logo和文字上下居中
         span {
             margin-left: 15px;//文字左侧设置间距，防止与Logo紧贴
         }
     }
 }
  .el-aside{
     background-color: #1d0f98;
 }
  .el-main{
     background-color: #c4edfd;
 }
</style>